<!doctype html>
<html lang="zh-CN">
<head>
<title>scrollReveal.js演示1_dowebok</title>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0;}
.dowebok { font-family: "Microsoft Yahei"; background-color: #202a39;}
.dowebok h1 { margin: 80px 0 50px; font-size: 60px; font-weight: 500; color: #fff; text-align: center;}
.dowebok h2 { margin: 10px 0; font-size: 24px; font-weight: 500; color: #616c84; text-align: center;}
.dowebok .column-container { width: 560px; margin: 0 auto; padding-top: 150px; font-size: 0;}
.dowebok .column { display: inline-block; width: 30px; margin: 0 20px; *display: inline; zoom: 1;}
.dowebok .block { margin-bottom: 45px; border-radius: 3px;}
.dowebok .block-1x { height: 180px;}
.dowebok .block-2x { height: 240px;}
.dowebok .block-3x { height: 300px;}
.block-blueberry { background: #008597;}
.block-slate { background: #2d3443;}
.block-grape { background: #4d407c;}
.block-raspberry { background: #ff005d;}
.block-mango { background: #ffcc00;}
.block-orange { background: #ff7c35;}
.block-kiwi { background: #35ff99;}
</style>
</head>

<body class="dowebok">
<h1 data-scroll-reveal="enter from the top over 1.5s ">scrollReveal.js</h1>
<h2 data-scroll-reveal="enter bottom but wait 1s">——页面滚动显示动画 JavaScript，不支持 IE6 - IE9</h2>

<div class="column-container clearfix"> 
	<!-- col 1 -->
	<div class="column">
		<div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
		<div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
		<div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
		<div class="block block-3x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
		<div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
		<div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
	</div>
	
	<!-- col 2 -->
	<div class="column">
		<div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
		<div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
		<div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
		<div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
		<div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
		<div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
	</div>
	
	<!-- col 3 -->
	<div class="column">
		<div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
		<div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
		<div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
		<div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
		<div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
		<div class="block block-3x block-orange" data-scroll-reveal="enter left"></div>
	</div>
	
	<!-- col 4 -->
	<div class="column">
		<div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
		<div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
		<div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
		<div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
		<div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
		<div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
	</div>
	
	<!-- col 5 -->
	<div class="column">
		<div class="block block-3x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
		<div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
		<div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
		<div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
		<div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
		<div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
	</div>
	
	<!-- col 6 -->
	<div class="column">
		<div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
		<div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
		<div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
		<div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
		<div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
		<div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
	</div>
	
	<!-- col 7 -->
	<div class="column">
		<div class="block block-2x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
		<div class="block block-1x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
		<div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
		<div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
		<div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
		<div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
	</div>
	
	<!-- col 8 -->
	<div class="column">
		<div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
		<div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
		<div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
		<div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
		<div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
		<div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
	</div>
</div>

<!-- <script src="http://cdn.dowebok.com/134/js/scrollReveal.js"></script> -->
<script src="{{ url_for('static', filename='script/scrollreveal.js') }}"></script>
<script>
(function(){
	window.scrollReveal = new scrollReveal({ reset: false, move: '50px'});
})();
</script>










<!-- 以下是统计等信息，与演示无关，不必理会 -->
<style>
.dowebok .vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体; text-align:center;}
.dowebok .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.dowebok .vad a:hover { color: #fff; background-color: #000;}
.dowebok .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 60px solid transparent;}
</style>

</body>
</html>